<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="./css/info.css" />
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>
</head>

<body>
    <header class="aui-bar aui-bar-nav">
        <a class="aui-pull-left" tapmode onclick="closeWin()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">运营数据</div>
    </header>
    <div class="aui-bar-nav-d"></div>

    <div class="info-data-t">
        数据总览
        <span>实时数据</span>
    </div>
    <div id="list">
        <div class="info-data-1">
            <ul>
                <li>
                    累计交易总额
                    <p>万元</p>
                </li>
                <li>
                    平均满标时间
                    <p>天</p>
                </li>
                <li>
                    平均借款期限
                    <p>个月</p>
                </li>
                <li>
                    已还本金
                    <p>万元</p>
                </li>
                <li>
                    待收本金
                    <p>万元</p>
                </li>
                <li>
                    累计投资笔数
                    <p>笔</p>
                </li>
                <li>
                    累计逾期收益
                    <p>万元</p>
                </li>
                <li>
                    已发放收益
                    <p>万元</p>
                </li>
                <li>
                    累计借贷笔数
                    <p>笔</p>
                </li>
            </ul>
        </div>

        <div class="info-data-2">
            <h3>投资用户信息</h3>
            <ul>
                <li>
                    <img src="image/info-data-2-1.png" alt=""> 投资人总数
                    <p>人</p>
                </li>
                <li>
                    <img src="image/info-data-2-2.png" alt=""> 人均累计投资金额
                    <p>元</p>
                </li>
                <li>
                    <img src="image/info-data-2-3.png" alt=""> 笔均投资金额
                    <p>元</p>
                </li>
            </ul>
        </div>
        <ul class="info-data-2-d">
            <li>
                <img src="image/info-data-2-d-1.png"> 最大单一投资人余额占比%
            </li>
            <li>
                <img src="image/info-data-2-d-2.png"> 前十大投资人投资余额占比%
            </li>
        </ul>

        <div class="info-data-3">
            <h3>用户画像</h3>
            <ul>
                <li>
                    <p>20-30岁</p>
                    <div class="info-data-3-r">
                        <span style="width:%;"></span>
                    </div>
                </li>
                <li>
                    <p>30-40岁</p>
                    <div class="info-data-3-r">
                        <span style="width:%;"></span>
                    </div>
                </li>
                <li>
                    <p>40-50岁</p>
                    <div class="info-data-3-r">
                        <span style="width:%;"></span>
                    </div>
                </li>
                <li>
                    <p>50-60岁</p>
                    <div class="info-data-3-r">
                        <span style="width:%;"></span>
                    </div>
                </li>
                <li>
                    <p>60岁以上</p>
                    <div class="info-data-3-r">
                        <span style="width:%;"></span>
                    </div>
                </li>
            </ul>
            <div class="info-data-3-d">
                <img src="" alt="">
                <ul>
                    <li>
                        <i></i> 女性投资人
                        <span>%</span>
                    </li>
                    <li>
                        <i class="man"></i> 男性投资人
                        <span>%</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="info-data-2">
            <h3>用户借款信息</h3>
            <ul>
                <li>
                    <img src="image/info-data-2-1.png" alt=""> 投资人总数
                    <p>人</p>
                </li>
                <li>
                    <img src="image/info-data-2-3.png" alt=""> 笔均投资金额
                    <p>元</p>
                </li>
            </ul>
        </div>
        <ul class="info-data-2-d">
            <li>
                <img src="image/info-data-2-d-1.png"> 最大单一投资人余额占比%
            </li>
            <li>
                <img src="image/info-data-2-d-2.png"> 前十大投资人投资余额占比%
            </li>
        </ul>

        <div class="info-data-3">
            <h3>用户画像</h3>
            <ul>
                <li>
                    <p>20-30岁</p>
                    <div class="info-data-3-r">
                        <span style="width:%;"></span>
                    </div>
                </li>
                <li>
                    <p>30-40岁</p>
                    <div class="info-data-3-r">
                        <span style="width:%;"></span>
                    </div>
                </li>
                <li>
                    <p>40-50岁</p>
                    <div class="info-data-3-r">
                        <span style="width:%;"></span>
                    </div>
                </li>
                <li>
                    <p>50-60岁</p>
                    <div class="info-data-3-r">
                        <span style="width:%;"></span>
                    </div>
                </li>
                <li>
                    <p>60岁以上</p>
                    <div class="info-data-3-r">
                        <span style="width:%;"></span>
                    </div>
                </li>
            </ul>
            <div class="info-data-3-d">
                <img src="" alt="">
                <ul>
                    <li>
                        <i></i> 女性投资人
                        <span>%</span>
                    </li>
                    <li>
                        <i class="man"></i> 男性投资人
                        <span>%</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="info-data-4">
            <h3>平台承受风险能力</h3>
            <ul>
                <li>
                    借款人逾期金额
                    <p>元</p>
                </li>
                <li>
                    借款人逾期比例
                    <p>%</p>
                </li>
                <li>
                    投资人损失
                    <p></p>
                </li>
                <div class="info-data-4-t">截止至</div>
            </ul>
        </div>
        <div class="info-data-4-text">
            以下逾期数据针对投资人还款情况统计
        </div>
        <ul class="info-data-4-d">
            <li>
                <p>历史逾期金额</p>
                元
            </li>
            <li>
                <p>历史金额逾期率</p>
                %
            </li>
            <li>
                <p>代偿金额</p>
                元
            </li>
            <li>
                <p>代偿笔数</p>
                笔
            </li>
            <li>
                <p>项目金额逾期率<br>（1-90天）</p>
                %
            </li>
            <li>
                <p>项目金额逾期率<br>（91-180天）</p>
                %
            </li>
            <li>
                <p>项目金额逾期率<br>（180天以上）</p>
                %
            </li>
            <li>
                <p>逾期项目比例</p>
                %
            </li>
            <li>
                <p>金额分级逾期率<br>（1-90天）</p>
                %
            </li>
            <li>
                <p>金额分级逾期率<br>（91-180天）</p>
                %
            </li>
            <li>
                <p>金额分级逾期率<br>（180天以上）</p>
                %
            </li>
            <li>
                <p>逾期笔数</p>
                笔
            </li>
        </ul>
    </div>
    <div class="info-data-4-text">
        得益于本土优势及一线风控、自有催收团队和其他措施保障，自平台上线以来项目逾期未对投资人造成损失
    </div>

    <div class="frdb">
        <img src="http://www.big-wealth.com/public/attachment/201811/22/13/5bf63b7a88602.jpg">
    </div>

</body>

<script type="text/template" id="template">
    <div class="info-data-1">
        <ul>
            <li>
                累计交易总额
                <p>{{=it.sjzl[1]}}万元</p>
            </li>
            <li>
                平均满标时间
                <p>{{=it.sjzl[2]}}天</p>
            </li>
            <li>
                平均借款期限
                <p>{{=it.sjzl[3]}}个月</p>
            </li>
            <li>
                已还本金
                <p>{{=it.sjzl[4]}}万元</p>
            </li>
            <li>
                待收本金
                <p>{{=it.sjzl[5]}}万元</p>
            </li>
            <li>
                累计投资笔数
                <p>{{=it.sjzl[6]}}笔</p>
            </li>
            <li>
                累计预期收益
                <p>{{=it.sjzl[7]}}万元</p>
            </li>
            <li>
                已发放收益
                <p>{{=it.sjzl[8]}}万元</p>
            </li>
            <li>
                累计借贷笔数
                <p>{{=it.sjzl[9]}}笔</p>
            </li>
        </ul>
    </div>

    <div class="info-data-2">
        <h3>投资用户信息</h3>
        <ul>
            <li>
                <img src="image/info-data-2-1.png" alt=""> 投资人总数
                <p>{{=it.load_info[1]}}人</p>
            </li>
            <li>
                <img src="image/info-data-2-2.png" alt=""> 人均累计投资金额
                <p>{{=it.load_info[2]}}元</p>
            </li>
            <li>
                <img src="image/info-data-2-3.png" alt=""> 笔均投资金额
                <p>{{=it.load_info[3]}}元</p>
            </li>
        </ul>
    </div>
    <ul class="info-data-2-d">
        <li>
            <img src="image/info-data-2-d-1.png"> 最大单一投资人余额占比{{=it.load_info[4]}}%
        </li>
        <li>
            <img src="image/info-data-2-d-2.png"> 前十大投资人投资余额占比{{=it.load_info[5]}}%
        </li>
    </ul>

    <div class="info-data-3">
        <h3>用户画像</h3>
        <ul>
            <li>
                <p>20-30岁</p>
                <div class="info-data-3-r">
                    <span style="width:{{=it.load_info[6][0]}}%;"></span>
                </div>
            </li>
            <li>
                <p>30-40岁</p>
                <div class="info-data-3-r">
                    <span style="width:{{=it.load_info[6][1]}}%;"></span>
                </div>
            </li>
            <li>
                <p>40-50岁</p>
                <div class="info-data-3-r">
                    <span style="width:{{=it.load_info[6][2]}}%;"></span>
                </div>
            </li>
            <li>
                <p>50-60岁</p>
                <div class="info-data-3-r">
                    <span style="width:{{=it.load_info[6][3]}}%;"></span>
                </div>
            </li>
            <li>
                <p>60岁以上</p>
                <div class="info-data-3-r">
                    <span style="width:{{=it.load_info[6][4]}}%;"></span>
                </div>
            </li>
        </ul>
        <div class="info-data-3-d">
            <img src="" alt="" id="load_info_pic">
            <ul>
                <li>
                    <i></i> 女性投资人
                    <span>{{=it.load_info[8]}}%</span>
                </li>
                <li>
                    <i class="man"></i> 男性投资人
                    <span>{{=it.load_info[9]}}%</span>
                </li>
            </ul>
        </div>
    </div>

    <div class="info-data-2">
        <h3>用户借款信息</h3>
        <ul>
            <li>
                <img src="image/info-data-2-1.png" alt=""> 借款人总数
                <p>{{=it.borrower_info[1]}}人</p>
            </li>
            <li>
                <img src="image/info-data-2-3.png" alt=""> 笔均融资金额
                <p>{{=it.borrower_info[2]}}元</p>
            </li>
        </ul>
    </div>
    <ul class="info-data-2-d">
        <li>
            <img src="image/info-data-2-d-1.png"> 最大单一借款待还金额占比{{=it.borrower_info[3]}}%
        </li>
        <li>
            <img src="image/info-data-2-d-2.png"> 前十大借款人投资余额占比{{=it.borrower_info[4]}}%
        </li>
    </ul>

    <div class="info-data-3">
        <h3>用户画像</h3>
        <ul>
            <li>
                <p>20-30岁</p>
                <div class="info-data-3-r">
                    <span style="width:{{=it.borrower_info[5][0]}}%;"></span>
                </div>
            </li>
            <li>
                <p>30-40岁</p>
                <div class="info-data-3-r">
                    <span style="width:{{=it.borrower_info[5][1]}}%;"></span>
                </div>
            </li>
            <li>
                <p>40-50岁</p>
                <div class="info-data-3-r">
                    <span style="width:{{=it.borrower_info[5][2]}}%;"></span>
                </div>
            </li>
            <li>
                <p>50-60岁</p>
                <div class="info-data-3-r">
                    <span style="width:{{=it.borrower_info[5][3]}}%;"></span>
                </div>
            </li>
            <li>
                <p>60岁以上</p>
                <div class="info-data-3-r">
                    <span style="width:{{=it.borrower_info[5][4]}}%;"></span>
                </div>
            </li>
        </ul>
        <div class="info-data-3-d">
            <img src="" alt="" id="borrower_info_pic">
            <ul>
                <li>
                    <i></i> 女性投资人
                    <span>{{=it.borrower_info[7]}}%</span>
                </li>
                <li>
                    <i class="man"></i> 男性投资人
                    <span>{{=it.borrower_info[8]}}%</span>
                </li>
            </ul>
        </div>
    </div>

    <div class="info-data-4">
        <h3>平台承受风险能力</h3>
        <ul>
            <li>
                借款人逾期金额
                <p>{{=it.bad_info[1]}}元</p>
            </li>
            <li>
                借款人逾期比例
                <p>{{=it.bad_info[2]}}%</p>
            </li>
            <li>
                投资人损失
                <p>{{=it.bad_info[3]}}</p>
            </li>
            <div class="info-data-4-t">截止至{{=it.bad_info[16]}}</div>
        </ul>
    </div>
    <div class="info-data-4-text">
        以下逾期数据针对投资人还款情况统计
    </div>
    <ul class="info-data-4-d">
        <li>
            <p>历史逾期金额</p>
            {{=it.bad_info[4]}}元
        </li>
        <li>
            <p>历史金额逾期率</p>
            {{=it.bad_info[5]}}%
        </li>
        <li>
            <p>代偿金额</p>
            {{=it.bad_info[6]}}元
        </li>
        <li>
            <p>代偿笔数</p>
            {{=it.bad_info[7]}}笔
        </li>
        <li>
            <p>项目金额逾期率<br>（1-90天）</p>
            {{=it.bad_info[8]}}%
        </li>
        <li>
            <p>项目金额逾期率<br>（91-180天）</p>
            {{=it.bad_info[9]}}%
        </li>
        <li>
            <p>项目金额逾期率<br>（180天以上）</p>
            {{=it.bad_info[10]}}%
        </li>
        <li>
            <p>逾期项目比例</p>
            {{=it.bad_info[11]}}%
        </li>
        <li>
            <p>金额分级逾期率<br>（1-90天）</p>
            {{=it.bad_info[12]}}%
        </li>
        <li>
            <p>金额分级逾期率<br>（91-180天）</p>
            {{=it.bad_info[13]}}%
        </li>
        <li>
            <p>金额分级逾期率<br>（180天以上）</p>
            {{=it.bad_info[14]}}%
        </li>
        <li>
            <p>逾期笔数</p>
            {{=it.bad_info[15]}}笔
        </li>
    </ul>
</script>

<script type="text/javascript">
    apiready = function() {
        load_list();
    }

    function load_list() {
        api.ajax({
            url: 'http://www.big-wealth.com/member.php?ctl=app_deal2&act=deal_data',
            method: 'get',
        }, function(ret, err) {
            if (ret) {
                // alert(JSON.stringify(ret));
                updateList(ret);
            } else {
                alert(JSON.stringify(err));
            }
        });

    }

    function updateList(data) {
        var template = $api.byId('template');
        var dotFn = doT.template(template.innerHTML);
        var html = dotFn(data);
        var list = $api.byId('list');
        $api.html(list, html);

        $("#load_info_pic").attr("src",data.load_info[7]);
        $("#borrower_info_pic").attr("src",data.borrower_info[6]);
    }

    function closeWin() {
        api.closeWin({});
    }
</script>

</html>
